<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
    </h:head>
    <h:body>
        <ui:composition template="/WEB-INF/facelets/templates/template_pagina.xhtml">
            <ui:define name="center">
                <!--center>
                    <p:galleria id="contentGalleria" value="#{bGalleria.cajasConRosas()}" var="productos" 
                            effect="slide" effectSpeed="1000" panelWidth="700" panelHeight="500" 
                            frameWidth="110" frameHeight="50" filmstripPosition="top" showCaptions="true" showOverlays="true">
                            <p:graphicImage id="productoImagen" value="#{msg.rutaImg}#{productos.nombreImagen}" />    
                        <p:galleriaOverlay title="#{productos.nombre}"  />  
                    </p:galleria>
                </center-->
                <center>
                <h:form id="formCajasConRosas">
                    <h:panelGrid id="panelCajasConRosas" columns="1"  cellpadding="0"  cellspacing="0" border="0"  styleClass="width-table">
                        <p:dataTable id="tableCajasConRosas"   widgetVar="tableCajasConRosas" var="ccr" value="#{bProducto.doListarProductoxTipoProducto()}" 
                                     paginator="true" rows="8" editable="true" emptyMessage="En ente Momento no Contamos con este Tipo de Producto" rowsPerPageTemplate="10,15,20"
                                     paginatorPosition="both" styleClass="order-table" style="font-family: Arial, Helvetica, sans-serif;font-size: 12px;"
                                     tableStyle="tablecolBusqSimpOrdTrab1,tablecolBusqSimpOrdTrab2,tablecolBusqSimpOrdTrab3, tablecolBusqSimpOrdTrab4, tablecolBusqSimpOrdTrab5, tablecolBusqSimpOrdTrab6">
                            <p:column headerText="Codigo">
                                <h:outputText value="#{ccr.codigoProducto}"  />
                            </p:column>
                            <p:column headerText="Nombre Producto" filterBy="#{ccr.nombreProducto}"  filterMatchMode="contains">
                                <h:outputText value="#{ccr.nombreProducto}"/>
                            </p:column>
                            <p:column headerText="Descripcion">
                                <!--h:outputText value="#{ccr.descripcionProducto}"/-->
                                <p:commandButton id="btnDescripcion" update=":formMostrarDescripcion" 
                                                 oncomplete="detProducto.show()" icon="ui-icon-zoomin" title="Descricion">  
                                    <f:setPropertyActionListener value="#{ccr}" target="#{bDetallePedido.objDetallePedidoRegistra.objProducto}" />  
                                </p:commandButton> 
                            </p:column>
                            <p:column headerText="Precio Soles">
                                <h:outputText value="#{ccr.precioSolesProducto}"/>
                            </p:column>
                            <p:column headerText="Precio Dolares">
                                <h:outputText value="#{ccr.precioDolaresProducto}"/>
                            </p:column>
                            <!-- bProducto.selectedProdcuto 
                            bProducto.selectedProducto.descripcionProducto-->
                            <p:column headerText="Ver">
                                <p:commandButton id="selectButton2" update=":formMostrarImagen" 
                                                 oncomplete="imgProducto.show()" icon="ui-icon-image" title="Ver Producto">  
                                    <f:setPropertyActionListener value="#{ccr}" target="#{bDetallePedido.objDetallePedidoRegistra.objProducto}" />  
                                </p:commandButton> 
                            </p:column>
                        </p:dataTable>
                    </h:panelGrid>
                </h:form>
                </center>
                <!-- muestra la descripcion de un producto -->
                <h:form id="formMostrarDescripcion">
                    <p:dialog id="detProducto"  header="#{msg.descripcion} #{bDetallePedido.objDetallePedidoRegistra.objProducto.nombreProducto}" 
                              widgetVar="detProducto" 
                              resizable="false" showEffect="explode" hideEffect="explode" modal="false" position="400,400">
                        <h:panelGrid columns="1"  cellpadding="0"  cellspacing="0" border="0" width="350">
                            <h:outputText value="#{bDetallePedido.objDetallePedidoRegistra.objProducto.descripcionProducto}" style="font-size: 12px;font-weight:bold"/>
                        </h:panelGrid>                        
                    </p:dialog>
                </h:form>
                <!-- muestra las imagenes de un producto -->
                <h:form id="formMostrarImagen">
                    <p:dialog id="imgProducto" header="#{bDetallePedido.objDetallePedidoRegistra.objProducto.nombreProducto}" widgetVar="imgProducto"
                              resizable="false" showEffect="explode" hideEffect="explode" modal="false">
                        <p:growl globalOnly="true"  id="estadoRegistraDetalle" sticky="false"  showDetail="true"  />
                        <p:panel id="panelRegistroDetalle" >
                            <h:panelGrid columns="1"  cellpadding="0"  cellspacing="0" border="0" width="350">
                                <center>
                                    <!--p:galleria id="contentGalleria" panelWidth="300" panelHeight="300"
                                                value="#{bGalleria.selectedImage(bProducto.selectedProducto.nombreProducto,bProducto.selectedProducto.descripcionProducto,bProducto.selectedProducto.precioSolesProducto)}" var="producto" 
                                           >
                                        <p:graphicImage id="productoImagen" value="#{msg.rutaImg}#{producto.nombreImagen}" alt="#{producto.nombreImagen}" title="#{producto.nombreImagen}" />    
                                        <p:galleriaOverlay title="#{producto.nombre}" />  
                                    </p:galleria-->
                                    <p:imageSwitch effect="wipe" widgetVar="switcher" slideshowAuto="false">  
                                        <ui:repeat value="#{bGalleria.selectedImage(bDetallePedido.objDetallePedidoRegistra.objProducto.nombreProducto,
                                                            bDetallePedido.objDetallePedidoRegistra.objProducto.descripcionProducto,
                                                            bDetallePedido.objDetallePedidoRegistra.objProducto.precioSolesProducto)}" 
                                                   var="producto">  
                                            <p:graphicImage value="#{msg.rutaImg}#{producto.nombreImagen}" width="340" height="300" />  
                                        </ui:repeat>  
                                    </p:imageSwitch>

                                </center>
                                <h:outputLabel value="Stock: #{bDetallePedido.objDetallePedidoRegistra.objProducto.stockProducto}"/>
                                <h:outputLabel value="Precio Soles S/: #{bDetallePedido.objDetallePedidoRegistra.objProducto.precioSolesProducto}"/>
                                <h:outputLabel value="Precio Dolares $: #{bDetallePedido.objDetallePedidoRegistra.objProducto.precioDolaresProducto}"/>
                                <h:inputHidden value="#{bDetallePedido.objDetallePedidoRegistra.objProducto.codigoProducto}"/>
                                
                                <h:outputLabel for="cantidadProducto" value="Ingrese cantidad a comprar: " 
                                               rendered="#{bUsuarioPersona.usuarioLogeado eq true
                                                        and bUsuarioPersona.objUsuario.nivelUsuario eq 2}"/>
                                <h:panelGroup rendered="#{bUsuarioPersona.usuarioLogeado eq true
                                                        and bUsuarioPersona.objUsuario.nivelUsuario eq 2}">
                                    <p:inputText id="cantidadProducto" value="#{bDetallePedido.objDetallePedidoRegistra.cantidadProducto}" 
                                             size="5" maxlength="3"  required="true" requiredMessage="#{msg.datoRequerido}" 
                                             validatorMessage="#{msg.datoValidacion}" label="Cantidad de Producto" title="Solo numeros">
                                    <f:validateLongRange minimum="1" maximum="999"/>
                                </p:inputText>
                                </h:panelGroup>
                                
                                <h:message for="cantidadProducto" showDetail="false" showSummary="true" styleClass="errors"/><br/>
                                <h:panelGroup rendered="#{bUsuarioPersona.usuarioLogeado eq true 
                                                         and bUsuarioPersona.objUsuario.nivelUsuario eq 2}">
                                    <h:panelGrid columns="1" cellpadding="2"  cellspacing="2" style="text-align: center;" width="60%">
                                        <p:commandButton icon="ui-icon-cart" actionListener="#{bDetallePedido.doRegistrarDetallePedido()}"  
                                                         value="#{msg.agregar}" async="true" update="formMostrarImagen, estadoRegistraDetalle" global="false"/>                                            
                                    </h:panelGrid>
                                </h:panelGroup>
                            </h:panelGrid>
                        </p:panel>
                    </p:dialog>
                </h:form>
            </ui:define>
        </ui:composition>        
    </h:body>
</html>